<template>
  <div class="home-page">
    <!-- === 顶部导航栏区域 === -->
    <header class="header">
      <div class="left">图书管理体统</div>
      <div class="right">
        <span class="username">管理员</span>
        <span class="logout" @click="handleLogout">退出</span>
        <img src="/头像.png" alt="头像" class="avatar_img" />
      </div>
    </header>
    <!-- === 悬浮式侧边栏导航 === -->
    <div class="sidebar">
      <ul class="nav-list">
        <li @click="handleViewChange('BookManage')">图书管理</li>
        <li @click="handleViewChange('UserManage')">用户管理</li>
        <li @click="handleViewChange('RecordList')">借阅记录</li>
        <!-- <li @click="handleViewChange('SystemSettings')">系统设置</li> -->
      </ul>
    </div>

    <!-- === 主内容区域（此处可拓展页面内容） === -->
    <main class="content">
      <component :is="currentComponent" />
    </main>
  </div>
</template>

<script setup lang="ts">
import BookManage from './BookManage.vue'
import UserManage from './UserManage.vue'
import RecordList from './RecordList.vue'
import SystemSettings from './SystemSettings.vue'
import { computed, ref, type Component } from 'vue'

import { useRouter } from 'vue-router'
const router = useRouter()
function handleLogout() {
  router.push('/login')
}

type ViewName = 'BookManage' | 'UserManage' | 'RecordList' | 'SystemSettings'

const activeView = ref<ViewName>('BookManage')

const viewMap: Record<ViewName, Component> = {
  BookManage,
  UserManage,
  RecordList,
  SystemSettings,
}

const currentComponent = computed(() => viewMap[activeView.value])

function handleViewChange(viewName: ViewName) {
  activeView.value = viewName
}
</script>

<style scoped>
/*** === 页面整体布局 === ***/
.home-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/*** === 顶部导航栏 === ***/
.header {
  height: 60px; /* 高度略微缩小 */
  width: calc(100vw-40px);
  background-color: #409eff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  font-size: 18px;
  border-radius: 12px; /* 圆润 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 增加阴影强度 */
  margin-top: 10px; /* 距离页面顶部 10px */
  margin-left: 20px; /* 距离左侧 20px */
  margin-right: 20px; /* 距离右侧 20px */
  border-bottom: 3px solid #c1c1c1; /* 底部轻微的分割线 */
  position: relative;
}

.sidebar-item {
  font-size: 16px;
  color: #333;
  padding: 12px 0;
  cursor: pointer;
  transition: color 0.3s;
}

.sidebar-item:hover {
  color: #409eff;
}

/*** === 主内容区域 === ***/
.content {
  position: fixed; /* 固定在页面上 */
  top: 100px; /* 距离顶部 */
  left: 250px; /* 距离左边 250px（配合侧边栏） */
  right: 20px; /* 距离右边 20px，自动拉伸宽度 */

  height: calc(100% - 120px); /* 自动计算高度（窗口高度 - top - margin-bottom） */
  min-width: 600px; /* 防止太小 */
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  z-index: 998;
  border-bottom: 4px solid #c1c1c1;
  border-top: 20px solid #409eff;

  overflow: auto; /* 内容超出时滚动 */
}

/* 左侧标题 */
.left {
  font-weight: bold;
  margin-left: 20px;
}

/* 右侧区域 */
.right {
  display: flex;
  align-items: center;
}

/* 用户名样式 */
.username {
  margin-right: 20px;
}

/* 退出按钮样式 */
.logout {
  cursor: pointer;
  font-weight: bold;
  margin-right: 20px;
}

/* 头像图片样式 */
.avatar_img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 20px;
}
</style>
